// Fonts
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.bunny.net/css?family=Nunito:300,400,500,600,700');

// Variables
@import 'variables';

// Bootstrap
@import 'bootstrap/scss/bootstrap';

// 自定义样式增强
body {
    font-family: $font-family-sans-serif;
    background-color: $gray-50;
}

// 卡片样式增强
.card {
    border: none;
    box-shadow: $box-shadow;
    border-radius: $border-radius-lg;
    overflow: hidden;
    transition: all 0.3s ease;

    &:hover {
        box-shadow: $box-shadow-lg;
        transform: translateY(-2px);
    }

    .card-header {
        background: linear-gradient(135deg, $teal-600, $teal-700);
        color: white;
        border: none;
        padding: 1.25rem 1.5rem;
        font-weight: 600;
        
        i {
            color: $teal-100;
        }
    }

    .card-body {
        padding: 1.5rem;
    }
}

// 统计卡片特殊样式
.stats-card {
    .card-header {
        &.bg-primary {
            background: linear-gradient(135deg, $primary, lighten($primary, 10%)) !important;
        }
        &.bg-success {
            background: linear-gradient(135deg, $success, lighten($success, 10%)) !important;
        }
        &.bg-info {
            background: linear-gradient(135deg, $info, lighten($info, 10%)) !important;
        }
        &.bg-warning {
            background: linear-gradient(135deg, $warning, lighten($warning, 10%)) !important;
        }
        &.bg-danger {
            background: linear-gradient(135deg, $danger, lighten($danger, 10%)) !important;
        }
    }
}

// 按钮样式增强
.btn {
    border-radius: $border-radius;
    font-weight: 500;
    padding: 0.625rem 1.25rem;
    transition: all 0.2s ease;
    box-shadow: $box-shadow-sm;

    &:hover {
        transform: translateY(-1px);
        box-shadow: $box-shadow-md;
    }

    &.btn-primary {
        background: linear-gradient(135deg, $primary, lighten($primary, 5%));
        border: none;
        
        &:hover {
            background: linear-gradient(135deg, darken($primary, 5%), $primary);
        }
    }
}

// 表格样式增强
.table {
    background: white;
    border-radius: $border-radius-lg;
    overflow: hidden;
    box-shadow: $box-shadow;

    thead th {
        background-color: $gray-50;
        border: none;
        color: $gray-700;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        font-size: 0.75rem;
        padding: 1rem;
    }

    tbody td {
        border-color: $gray-100;
        padding: 1rem;
        vertical-align: middle;
    }

    tbody tr:hover {
        background-color: $gray-50;
    }
}

// 表单样式增强
.form-control {
    border: 1px solid $gray-300;
    border-radius: $border-radius;
    padding: 0.75rem 1rem;
    transition: all 0.2s ease;

    &:focus {
        border-color: $primary;
        box-shadow: 0 0 0 3px rgba($primary, 0.1);
    }
}

.form-label {
    font-weight: 500;
    color: $gray-700;
    margin-bottom: 0.5rem;
}

// Alert 样式增强
.alert {
    border: none;
    border-radius: $border-radius-lg;
    box-shadow: $box-shadow;
    
    &.alert-success {
        background: linear-gradient(135deg, lighten($success, 45%), lighten($success, 40%));
        color: darken($success, 20%);
        border-left: 4px solid $success;
    }
    
    &.alert-danger {
        background: linear-gradient(135deg, lighten($danger, 45%), lighten($danger, 40%));
        color: darken($danger, 20%);
        border-left: 4px solid $danger;
    }
}

// 导航样式增强
.navbar {
    box-shadow: $box-shadow;
    background: white !important;
    
    .navbar-brand {
        font-weight: 700;
        color: $gray-800 !important;
    }
}

// 页面标题样式
.page-title {
    color: $gray-800;
    font-weight: 700;
    margin-bottom: 1.5rem;
}

// 工具栏样式
.toolbar {
    background: white;
    border-radius: $border-radius-lg;
    padding: 1rem 1.5rem;
    margin-bottom: 1.5rem;
    box-shadow: $box-shadow-sm;
    border: 1px solid $gray-200;
}

// 徽章样式增强
.badge {
    font-weight: 500;
    border-radius: $border-radius;
    padding: 0.375rem 0.75rem;
}

// 响应式间距调整
@media (max-width: 768px) {
    .card {
        margin-bottom: 1rem;
    }
    
    .btn {
        font-size: 0.875rem;
        padding: 0.5rem 1rem;
    }
}
